<template>
    <div class="home">
        <div class="headers">
          <div class='headers-main'>
          <Header></Header>
          </div>
          </div>
 <section class='wrapper'>
   
        <!-- 轮播图 -->
       <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000">
           <van-swipe-item v-for="(image, index) in images" :key="index">
               <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
       </div >
       <Iconings></Iconings>
       <Recommend></Recommend>
     <Like></Like>
 </section>
        <Tabbar></Tabbar>
        </div>
</template>

<script>

import Header from "../components/home/Header.vue"
import Tabbar from '../components/common/Tabbar.vue'
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import Iconings from '@/components/home/iconings.vue';
import Recommend from '@/components/home/Recommend.vue'
// import BetterScroll from 'better-scroll'
import Like from '@/components/home/Like.vue';
// import { Loading } from 'vant';

// Vue.use(Loading);
Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
   name:"Home",
   components:{
       Header,
       Tabbar,
      Iconings,
       Recommend,
       Like
       
   },
  //  mounted(){
  //    new BetterScroll('.warpper',{
  //      movable:true,
  //      zoom:true
  //    })
  //  },
   data() {
    return {

      images: [
          './images/swipe3.png',
        './images/swipe1.png',
        './images/swipe2.png',
        
      ],
      

    };
  },

};
</script>
<style scoped>
.swipe{
    /* position: relative;
    top:43px; */
    width: 95%;
    margin: 0 auto;
    margin-top: 53px;
    border-radius: 15px;
    border-bottom:2px solid rgb(123, 172, 130) ;
}
  .my-swipe .van-swipe-item {
   width: 100%;
   height: 200px;
  }
  .my-swipe .van-swipe-item img{
      width: 100%;
      height: 200px;
      border-radius: 15px;
   
  }
 /* .iconn{
   margin: 0 auto;
   margin-top:3px ;
   width: 95%;
   height:150px;
   border-radius: 15px;
   background-color: rgba(053,103,083);
 } */
.home{
   background-color: rgb(30, 30, 30);
   height: 1300px;
   /* width: 100vw; */
   /* flex-direction: column;
   overflow: hidden; */
   
 }
 /* .headers{
   
  

 }
.headers-main{
 position: fixed;    
   left:0;
   top:0;
    width: 100%;
 } */

/* .wrapper{

   flex: 1;
   overflow: hidden;
} */
 /* .bott{
   margin: 0 auto;
   margin-top:3px ;
   width: 95%;
   height:230px;
   border-radius: 15px;
   background-color: rgba(053,103,083);
 } */

</style>